<!-- 组件说明 -->
<template>
  <el-scrollbar>
    <div class="topo-container" v-title="topoTitle">
      <el-button
        v-if="canShareRef"
        :icon="Share"
        :loading="isSharingRef"
        class="share-btn"
        @click="share"
        size="small"
        >{{ shareBtn }}</el-button
      >
      <div class="topology-plan" v-if="hasEntity">
        <div class="layout-line" v-for="(first, fIndex) in nodeList" :key="fIndex">
          <div
            v-if="first.secondNodeList.length > 0"
            class="node first-node"
            :class="riskColor(first)"
          >
            {{ first.textMap.NAME }}
          </div>
          <div
            v-if="first.secondNodeList.length == 0"
            class="third-node1"
            :class="riskColor(first)"
          >
            <div class="title">
              <el-tooltip content="关键路径标识">
                <div v-if="first.valueMap.IS_CRITICAL_PATH == true" class="biaoshi">
                  <img src="@/assets/isCruxB.png" style="width: 12px; height: 12px" />
                </div>
              </el-tooltip>
              {{ first.textMap.NAME }}
            </div>
            <div class="detail1">
              <div>
                <span class="detail-title">{{ planTime }} : </span>

                <span>{{ first.textMap.PLAN_TO }}</span>
              </div>
              <div>
                <span class="detail-title">{{ actualTime }} : </span
                ><span>{{ first.textMap.ACT_TO }}</span>
              </div>
            </div>
          </div>
          <div class="second-list" v-if="first.secondNodeList.length > 0">
            <div
              class="second-with-third"
              v-for="(second, sIndex) in first.secondNodeList"
              :key="sIndex"
            >
              <div class="third-node1 second-node" :class="riskColor(second)">
                <div class="title">
                  <el-tooltip content="关键路径标识">
                    <div v-if="second.valueMap.IS_CRITICAL_PATH == true" class="biaoshi">
                      <img src="@/assets/isCruxB.png" style="width: 12px; height: 12px" />
                    </div>
                  </el-tooltip>
                  {{ second.textMap.NAME }}
                </div>
                <div class="detail1">
                  <div>
                    <span class="detail-title">{{ planTime }} : </span>

                    <span>{{ second.textMap.PLAN_TO }}</span>
                  </div>
                  <div>
                    <span class="detail-title">{{ actualTime }} : </span
                    ><span>{{ second.textMap.ACT_TO }}</span>
                  </div>
                </div>
              </div>
              <template v-if="second.thirdNodeList.length > 0">
                <ThirdNode
                  v-for="(third, tIndex) in second.thirdNodeList"
                  :key="tIndex"
                  :thirdData="third"
                />
              </template>
              <div v-else class="no-data">{{}}</div>
            </div>
          </div>
          <div v-else class="no-data">{{}}</div>
        </div>
      </div>
      <div v-else class="no-data">{{}}</div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const { VITE_DOMAIN_LOCATION } = import.meta.env
import { fetchData, insertShareInfo, fetchShareInfo } from '@/api/qygly'
import ThirdNode from './thirdNode.vue'
import { reqAllPlan } from '@/api/config/plan'
import { riskColor } from './index'
import { Share } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user.js'
const store = useUserStore()
let canShareRef = ref(false)
let isSharingRef = ref(false)
const route = useRoute()
const req = ref({})
const nodeList = ref([])
const recordList = ref([])

import { usePltI18nStore } from '@/stores/i18n-plt'
const pltI18nStore = usePltI18nStore()

const { shareBtn } = pltI18nStore.pltI18n.cisdi.gczx.frontEnd.common
const { nodata, topoTitle, planTime, actualTime } = pltI18nStore.pltI18n.cisdi.gczx.frontEnd.topo
const hasEntity = ref(true) // 是否有数据

const getData = async () => {
  // 获取数据
  const res = await fetchData(req.value)
  const { entityRecordList } = res
  if (!entityRecordList) {
    hasEntity.value = false
    return
  } else {
    hasEntity.value = true
    const firstNodeList = entityRecordList.filter((item) => {
      if (item.textMap.CC_PRJ_STRUCT_NODE_PID == undefined) {
        return item
      } else {
        const findParent = entityRecordList.find(
          (record) => record.valueMap.ID == item.valueMap.CC_PRJ_STRUCT_NODE_PID,
        )
        if (!findParent) {
          return item
        }
      }
    })
    firstNodeList.map((first) => {
      const secondNodeList = entityRecordList.filter(
        (item) => item.valueMap.CC_PRJ_STRUCT_NODE_PID == first.valueMap.ID,
      )
      secondNodeList.map((second) => {
        const thirdNodeList = entityRecordList.filter(
          (item) => item.valueMap.CC_PRJ_STRUCT_NODE_PID == second.valueMap.ID,
        )
        second.thirdNodeList = thirdNodeList
      })
      first.secondNodeList = secondNodeList
    })
    recordList.value = entityRecordList
    nodeList.value = firstNodeList
  }
}

if (route.query.shareId) {
  // 若为查看共享的数据：
  onMounted(() => {
    fetchShareInfo({
      orgId: route.query.orgId,
      id: route.query.shareId,
    }).then((result) => {
      nodeList.value = JSON.parse(result.shareContextData).nodeList
    })
  })
} else {
  onMounted(() => {
    req.value = {
      ...reqAllPlan,
      sevId: route.query.sevId, // 通过路由区分现行计划、历史计划，具体值在企业云里配置
    }
    if (import.meta.env.MODE === 'development') {
      getData()
    }
    const { iframeId } = route.query
    const data = {
      mark: 'QYGLY',
      iframeId,
      isReqOrResp: true,
      type: 'READY_TO_FETCH',
      commId: 'READY_TO_FETCH',
    }
    window.parent.postMessage(data, '*')
    canShareRef.value = true
  })
}

// 分享
const share = () => {
  isSharingRef.value = false
  const { id } = store.loginInfo.currentOrgInfo
  console.log(123, nodeList.value, recordList.value)
  insertShareInfo({
    // test240511要换成具体登陆的组织ID，@SHARE_ID将由后端代入具体的shareId并保存到数据库：
    shareUrl: `../${VITE_DOMAIN_LOCATION}/#/topo?orgId=${id}&shareId=@SHARE_ID`, //http://localhost:5173/
    // shareContextData用于保存页面状态：
    shareContextData: JSON.stringify({
      nodeList: nodeList.value,
      recordList: recordList.value,
    }),
  })
    .then((result) => {
      const data1 = {
        mark: 'QYGLY',
        iframeId: route.query.iframeId,
        isReqOrResp: true,
        type: 'CONFIG_SHARE',
        commId: 'CONFIG_SHARE',
        content: {
          shareInfo: result,
        },
      }
      window.parent.postMessage(data1, '*')
    })
    .finally(() => {
      isSharingRef.value = false
    })
}

// 接收企业云的数据
window.addEventListener(
  'message',
  async (e) => {
    console.info('cisdi-gantt收到的message', e.data.content)
    req.value = {
      ...reqAllPlan,
      ...e.data.content, //企业云postmessage发过来的数据
      sevId: route.query.sevId, // 通过路由区分现行计划、历史计划，具体值在企业云里配置
    }

    if (e.data.mark !== 'QYGLY') {
      return
    } else {
      if (!route.query.shareId) {
        getData()
      }
    }
  },
  false,
)
</script>

<style lang="scss" src="">
$single-width: 194px;
$primary-node-height: 60px;
$todo-color: #606266; //#606266,#ebebeb
$done-color: #2daa98; //#2daa98,#63b47e
$doing-color: #ff9500; //#ff9500,#eec871
$over-color: #ff4949; //#ff4949,#e60012

.topo-container {
  padding-top: 50px;
  height: 100vh;

  .share-btn {
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 99;
  }

  .topology-plan {
    white-space: nowrap; // div元素不换行
    display: flex;

    .no-data {
      font-size: 12px;
      color: #555;
      text-align: center;
    }

    .layout-line {
      // width: $single-width;
      // background-color: red;
      // margin-right: 50px;
      height: 300px;
      margin-right: 20px;

      .second-list {
        display: flex;
      }

      .node {
        width: $single-width;
        // display: inline-block;
        height: $primary-node-height;
        line-height: $primary-node-height;
        background-color: $todo-color;
        border-radius: 4px;
        margin-right: 10px;
        color: #fff;
        text-align: center;

        &.todo {
          background-color: $todo-color;
        }

        &.done {
          background-color: $done-color;
        }

        &.doing {
          background-color: $doing-color;
        }

        &.over {
          background-color: $over-color;
        }

        &.first-node {
          display: block;
          width: calc(100% - 10px);
          min-width: 194px;
          height: calc($primary-node-height/2 - 5px);
          line-height: calc($primary-node-height/2 - 5px);
          margin-bottom: 20px;
        }

        &.second-node {
          height: calc($primary-node-height/2 - 5px);
          line-height: calc($primary-node-height/2 - 5px);
          // margin-bottom: 10px;
        }
      }
    }
  }
}
.third-node1 {
  position: relative;
  border: 1px solid $done-color;
  display: block;
  width: calc(100% - 10px);
  min-width: 194px;
  border-radius: 4px;
  margin-bottom: 20px;
  margin-right: 10px;
  // text-align: center;
  // margin: 20px 0;
  &.doing {
    border: 1px solid $doing-color;
    .title {
      background-color: $doing-color;
    }
  }
  &.over {
    border: 1px solid $over-color;
    .title {
      background-color: $over-color;
    }
  }
  &.todo {
    border: 1px solid $todo-color;
    .title {
      background-color: $todo-color;
    }
  }
  .title {
    background-color: $done-color;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    text-align: center;
  }
  .detail1 {
    padding: 10px 20px;
    font-size: 12px;
    line-height: 24px;
    .detail-title {
      font-weight: bold;
      margin-right: 10px;
    }
  }
}
.biaoshi {
  position: absolute;
  right: 10px;
}
</style>
